/* eslint-disable jsx-a11y/alt-text */
import React from 'react';
import Navbar from '../component/Navbar';
import './style/myBill.css';
const tabList = ["操作时间", "类型", "交易金额", '余额']
const tabs = ["全部", "收入", "支出"]
class myBill extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabIndex: 0,
            listIndex: -1,
            type: true,
            list: [
                { time: '2020-4-23 12:12:23', type: '期货盈利', money: "＋500.00", balance: "￥50000.00", state: 1 },
                { time: '2020-4-23 12:12:23', type: '本金收入', money: "＋500.00", balance: "￥50000.00", state: 1 },
                { time: '2020-4-23 12:12:23', type: '期货盈利', money: "＋500.00", balance: "￥50000.00", state: 1 },
                { time: '2020-4-23 12:12:23', type: '保证金冻结', money: "500.00", balance: "￥50000.00", state: 2 },
                { time: '2020-4-23 12:12:23', type: '综合费', money: "-500.00", balance: "￥50000.00", state: 3 },
                { time: '2020-4-23 12:12:23', type: '综合费', money: "-500.00", balance: "￥50000.00", state: 3 },
                { time: '2020-4-23 12:12:23', type: '保证金扣除', money: "-500.00", balance: "￥50000.00", state: 3 },
            ]
        }
    }
    goBack = () => {
        this.props.history.goBack();
    }
    //tab切换
    jumpTab(index) {
        var list = [
            { time: '2020-4-23 12:12:23', type: '期货盈利', money: "＋500.00", balance: "￥50000.00", state: 1 },
            { time: '2020-4-23 12:12:23', type: '本金收入', money: "＋500.00", balance: "￥50000.00", state: 1 },
            { time: '2020-4-23 12:12:23', type: '期货盈利', money: "＋500.00", balance: "￥50000.00", state: 1 },
            { time: '2020-4-23 12:12:23', type: '保证金冻结', money: "500.00", balance: "￥50000.00", state: 2 },
            { time: '2020-4-23 12:12:23', type: '综合费', money: "-500.00", balance: "￥50000.00", state: 3 },
            { time: '2020-4-23 12:12:23', type: '综合费', money: "-500.00", balance: "￥50000.00", state: 3 },
            { time: '2020-4-23 12:12:23', type: '保证金扣除', money: "-500.00", balance: "￥50000.00", state: 3 },
        ]
        var arr;
        if (index === 1) {
            arr = list.filter(item => item.state === 1)
        }
        if (index === 2) {
            arr = list.filter(item => item.state === 3)
        }
        if (index === 0) {
            arr = list
        }
        this.setState({
            tabIndex: index,
            list: arr
        })
    }
    //点击list展开
    jumpListItem(index) {
        const { listIndex } = this.state
        if (listIndex === index) index = -1
        this.setState({
            listIndex: index
        })
    }
    render() {
        const { list, listIndex, tabIndex } = this.state
        return (
            <div className='myBill'>
                <div className='navtor'>
                    <div className='backDiv' onClick={() => this.goBack()}> <img alt='' src={require('./img/left.png')}></img></div>
                    <div className='tabs'>
                        <div className='titleList'>
                            {
                                tabs.map((item, index) => {
                                    return <div onClick={() => this.jumpTab(index)} key={index} className={tabIndex === index ? "titleTrue" : 'titleItem'} >{item}</div>
                                })
                            }
                        </div>
                    </div>

                </div>
                <div className='scroll'>
                    <div className="tab">
                        {
                            tabList.map((item, index) => {
                                return <div key={index} className="tabItem" style={{ color: '#999' }}>{item}</div>
                            })
                        }
                    </div>
                    <div className='content'>
                        {
                            list.map((item, index) => {
                                return <div className="listItem" key={index} onClick={() => this.jumpListItem(index)}>
                                    <div className="flex align-center" style={{ color: item.state === 1 ? "#FC5656" : item.state === 2 ? "#999" : "#28D1A7" }} >
                                        <div className="tabItem">{item.time}</div>
                                        <div className="tabItem">{item.type}</div>
                                        <div className="tabItem">{item.money}</div>
                                        <div className="tabItem">{item.balance}</div>
                                    </div>
                                </div>
                            })
                        }

                    </div>
                </div>
            </div >
        )
    }
}

export default myBill;